<template>
  <div class="GrabbleType1">
    <ul v-if="infoSongs">
      <remark :remarkInfo='remark'/>
      <li v-for="(val,index) in infoSongs" :key='index' :class="index%2==1?'evenBackground':''">
        <songList :info="val"/>
      </li>
    </ul>
  </div>
</template>

<script>
import require from 'requests/grabble'
import songList from 'components/searchComponents/songList'
import remark from 'components/searchComponents/remark'
export default {
  name: "GrabbleType1",
  data() {
    return {
      keyWord: this.$route.query.keyWord,
      infoSongs:null,
      remark:{
        grid1:'歌曲',
        grid2:'歌手',
        grid3:'专辑',
        grid4:'时长' 
      }
    };
  },
  components:{
    songList,
    remark
  },
  watch: {
    $route: "newpage",
  },
  methods:{
    getSongs(value){
      require.googleSong(value).then(res=>{
        //console.log(res.data.result.songs)
        this.infoSongs=res.data.result.songs
      })
    },
    newpage() {
      this.keyWord =this.$route.query.keyWord
      this.getSongs(this.keyWord)
      //console.log(this.keyWord)
    },
  },
  mounted() {
    this.getSongs(this.keyWord)
  }
};
</script>

<style scoped lang='less'>
.evenBackground {
  background-color: rgba(0, 0, 0, 0.01);
}
</style>